<template>
  <div class="c_container">
    <div class="c_left">
      <icon :name="icon" scale="2"></icon>
      <span style="padding-left:0.2rem">{{ title }}</span>
    </div>
    <div class="c_middle">
      <!-- 搜索框 -->
      <div class="search_box">
        <el-input
          :placeholder="searchplaceholder"
          v-model="inputContent"
          class="sc-container"
          size="small"
          @keyup.enter.native="searchInput"
        />
      </div>
      <!-- 日期选择 -->
      <div class="date_box" v-if="dateSel">
        <el-date-picker
          v-model="daterangeValue"
          type="daterange"
          size="small"
          align="center"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <!-- 下拉框 安装地点 -->
      <div class="select_box" v-if="location">
        <el-select
          v-model="LocationValue"
          :placeholder="selectplaceholder"
          clearable
           size="small"
        >
          <el-option
            v-for="item in LocationOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <!-- 下拉框 是否启用 -->
      <div class="use_box" v-if="used">
        <el-select v-model="useValue" placeholder="是否启用"  size="small" clearable>
          <el-option
            v-for="item in UseOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <!-- 下拉框 是否已修好 -->
      <div class="use_box" v-if="fixIt">
        <el-select v-model="fixValue" placeholder="是否已修好"  size="small" clearable>
          <el-option
            v-for="item in fixOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <!--状态 出库/入库-->
      <div class="use_box" v-if="status">
        <el-select v-model="statusValue" placeholder="请选择状态"  size="small" clearable>
          <el-option
            v-for="item in StatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    <div class="c_right">
      <el-button type="success"  size="small" @click="searchInput">搜索</el-button>
      <el-button  size="small" @click="reset">重置</el-button>
    </div>
  </div>
</template>

<script>
import { LocationOptions, UseOptions,fixOptions,StatusOptions } from "../../assets/data/data";
import { formatTime } from '../../assets/js/formatTime'
export default {
  name: "ListHead",
  props: {
    // 图标
    icon: {
      type: String,
      default: "",
    },
    // 标题
    title: {
      type: String,
      default: "",
    },
    // 搜索框 占位符
    searchplaceholder: {
      type: String,
      default: "请输入内容",
    },
    // 下拉框占位符
    selectplaceholder: {
      type: String,
      default: "",
    },
    //类型
    type: {
      type: String,
      default: "",
    },
    // 自定义方法
    createFun: Function,
    //搜索 安装地点
    location:{
      type:Boolean,
      default:false
    },
    //是否已修好
    fixIt:{
      type:Boolean,
      default:false
    },
    //日期选择
    dateSel:{
      type:Boolean,
      default:false
    },
    //是否启用
    used:{
      type:Boolean,
      default:false
    },
    //状态 出库/入库
    status:{
      type:Boolean,
      default:false
    }
  },
  computed: {
    canSave() {
      return true;
    },
  },
  data() {
    return {
      inputContent: "",
      /** 更多操作 */
      moreTypes: [],
      // 创建的相关信息
      createActionInfo: { type: "save" },
      createType: "",
      isCreate: false, // 是创建

      LocationValue: '', //安装地点信息
      LocationOptions,
      useValue: "",//是否启用
      UseOptions,
      daterangeValue:"",//时间段
      fixValue:"",//是否已修好
      fixOptions,
      statusValue:"",
      StatusOptions

    };
  },
  methods: {
    createClick() {
      if (this.createFun) {
        this.createFun();
      } else {
        this.createCRMType = this.crmType;
        this.createActionInfo = { type: "save" };
        this.isCreate = !this.isCreate;
      }
    },
    // 进行搜索操作
    searchInput() {
      var params={}
      params.keyWord = this.inputContent
      if(this.location){
        params.location=this.LocationOptions[this.LocationValue].label
      }
      if(this.used){
        params.used = this.UseOptions[this.useValue].label
      }
      if(this.dateSel){
        params.starttime = formatTime(this.daterangeValue[0],'yyyy-MM-dd HH:mm:ss')
        params.endtime = formatTime(this.daterangeValue[1],'yyyy-MM-dd HH:mm:ss')
      }
      if(this.status){
        params.status = this.StatusOptions[this.statusValue].label
      }
      this.$emit("on-search",params)      
    },
    //重置
    reset(){
      this.LocationValue=''
      this.daterangeValue=''
      this.useValue=''
      this.inputContent=''
      this.$emit("on-index")
    }
  },
};
</script>

<style  lang="scss" scoped>
.c_container {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.c_left {
  width: 12%;
  padding-left: 0.2rem;
  color: #01d6ff;
  font-size: 0.25rem;
  font-weight: 700;
}
.c_middle {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.date_box,.select_box,.use_box,.c_right{
  padding-left: 0.2rem;
}
</style>